// 静态属性，样式属性，剥离数据 多种屏幕尺寸都事先部署好
// import echarts from 'echarts'
const staticOption = {
  series: [
    {
      name: '访问来源',
      type: 'pie',
      radius: ['65%', '70%'],
      center: ['50%', '40%'],
      avoidLabelOverlap: false,
      label: {
        normal: {
          show: true,
          position: 'center',
          textStyle: {
            fontSize: '40',
            color: '#fff'
          },
          formatter: function (params) {
            return `Load\n${params.percent}%`
          }
        },
        emphasis: {
          show: true,
          textStyle: {
            fontSize: '24'
          }
        }
      },
      labelLine: {
        normal: {
          show: false
        }
      },
      itemStyle: {
        color: '#19c1a4'
      },
      data: []
    }
  ],
  silent: true,
  graphic: {
    elements: [
      {
        type: 'text',
        bottom: '10%',
        left: 'center',
        style: {
          text: '',
          fontSize: 30,
          fill: '#fff'
        }
      }
    ]
  }
}

const staticOptionMid = {
  series: [
    {
      name: '访问来源',
      type: 'pie',
      radius: ['65%', '70%'],
      center: ['50%', '40%'],
      avoidLabelOverlap: false,
      label: {
        normal: {
          show: true,
          position: 'center',
          textStyle: {
            fontSize: '24',
            color: '#fff'
          },
          formatter: function (params) {
            return `负载\n${params.percent}%`
          }
        },
        emphasis: {
          show: true,
          textStyle: {
            fontSize: '30'
          }
        }
      },
      labelLine: {
        normal: {
          show: false
        }
      },
      itemStyle: {
        color: '#19c1a4'
      },
      data: []
    }
  ],
  silent: true,
  graphic: {
    elements: [
      {
        type: 'text',
        bottom: '13%',
        left: 'center',
        style: {
          text: '',
          fontSize: 20,
          fill: '#fff'
        }
      }
    ]
  }
}

const staticOptionSmall = {
  series: [
    {
      name: '访问来源',
      type: 'pie',
      radius: ['65%', '70%'],
      center: ['50%', '40%'],
      avoidLabelOverlap: false,
      label: {
        normal: {
          show: true,
          position: 'center',
          textStyle: {
            fontSize: '20',
            color: '#fff'
          },
          formatter: function (params) {
            return `负载\n${params.percent}%`
          }
        },
        emphasis: {
          show: true,
          textStyle: {
            fontSize: '24'
          }
        }
      },
      labelLine: {
        normal: {
          show: false
        }
      },
      itemStyle: {
        color: '#19c1a4'
      },
      data: []
    }
  ],
  silent: true,
  graphic: {
    elements: [
      {
        type: 'text',
        bottom: '10%',
        left: 'center',
        style: {
          text: '',
          fontSize: 20,
          fill: '#fff'
        }
      }
    ]
  }
}

// 备选颜色，有需求则进行循环

// const colors = ['#fe6e80', '#ffa286', '#ffdd89', '#a7eb87', '#2bd3bd', '#0099ff', '#7574ee']
// let colorIndex = 0

// 获取设备宽度
const screen = window.screen.width

class ChartFactory {
  constructor (additionalOptions) {
    // 根据屏幕宽度获取不同配置的echarts配置
    this.option = staticOption
    if (screen < 1920 && screen > 1200) {
      this.option = staticOptionMid
    }
    if (screen === 1024) {
      this.option = staticOptionSmall
    }
    // 下方复制属于浅拷贝，指向同个内存，针对可能有更改的需求，要进行一次清理
    this.clear()
    // colorIndex = 0
    // // 装配数据 必须使用箭头函数
    this.option.graphic.elements[0].style.text = additionalOptions.name
    this.option.series[0].data.push({
      value: additionalOptions.data,
      name: additionalOptions.name
    })
    this.option.series[0].data.push({
      value: 100 - additionalOptions.data,
      name: '阴影',
      label: {
        show: false
      },
      itemStyle: {
        color: '#05388f'
      }
    })
  }

  // 清理方法，要将部署的新数据全部置空
  clear () {
    this.option.series[0].data = []
  }

  getOption () {
    return this.option
  }
}

export { ChartFactory }
